<template>
  <div class="list_center">
    <hqy-header></hqy-header>
    <div class="articleBanner">
    </div>
    <div class="news">
      <div class="news_tabs">
        <p @click="tabNum=0">
          <span :class="['tab_big',tabNum==1?'change_tab':'']">
            集团新闻
          </span>
          <span>
            GROUP NEWS
          </span>
          <i v-show="tabNum==0"></i>
        </p>
        <p @click="tabNum=1">
          <span :class="['tab_big',tabNum==0?'change_tab':'']">
            行业资讯
          </span>
          <span>
            INDUSTRY INFORMATION
          </span>
          <i v-show="tabNum==1"></i>
        </p>
      </div>
      <div class="news_list">
        <div
          :class="['news_group', tabNum==0?'news_group_show':'']"
          v-show="tabNum==0"
        >
          <ul>
            <li
              v-for="item in groupList"
              :key="item.newId"
            >
              <p class="article_img">
                <img
                  :src="item.photo"
                  alt=""
                >
              </p>
              <p class="article_text">
                <i
                  class="list_title"
                  @click="goDetail(item)"
                >{{item.title}}</i>
                <span class="list_tips">{{item.shortTitle}}</span>
                <span
                  class="more"
                  @click="goDetail(item)"
                >查看全文</span>
              </p>
            </li>
          </ul>
        </div>
        <div
          :class="['new_information', tabNum==1?'news_group_show':'' ]"
          v-show="tabNum==1"
        >
          <ul>
            <li
              v-for="item in industryList"
              :key="item.newId"
            >
              <p class="article_img">
                <img
                  :src="item.photo"
                  alt=""
                >
              </p>
              <p class="article_text">
                <i
                  class="list_title"
                  @click="goDetail(item)"
                >{{item.title}}</i>
                <span class="list_tips">{{item.shortTitle}}</span>
                <span
                  class="more"
                  @click="goDetail(item)"
                >查看全文</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <footer>
      <div>
        © 2001-2020 华清园教育 | 北京华清园教育科技有限公司 All Rights Reserved. 京ICP备14008487号
      </div>
    </footer>
  </div>
</template>

<script>
import { getArticle } from '@/api/home.js'
import HqyHeader from '../../components/header'

export default {
  data () {
    return {
      groupList: [],
      industryList: [],
      tabNum: 0
    }
  },
  components: {
    'hqy-header': HqyHeader
  },
  created () {
    if (this.$route.params.num) {
      this.tabNum = this.$route.params.num
    } else {
      this.tabNum = 0
    }
    this.getLy()
    this.showArticle()
  },
  methods: {
    // 乐语
    getLy() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://op.jiain.net/20004559/10115955.js'
      document.head.appendChild(script)
    },
    // 获取文章
    showArticle () {
      this.groupList = []
      this.industryList = []
      getArticle().then(res => {
        res.data.list.forEach(item => {
          item.photo = 'http://8.131.241.21:8081' + item.photo
          if (item.objectLocation === "4") {
            this.groupList.push(item)
          }
          if (item.objectLocation === "1") {
            this.industryList.push(item)
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转到详情页
    goDetail (item) {
      let articleId = JSON.stringify(item)
      sessionStorage.setItem("articleId", articleId)
      this.$router.push({
        name: 'articleDetails',
        params: {
          id:item.newId,
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>